<template>
  <el-container>

    <!-- 顶部 -->
    <el-header>
      <div class="head_left">
        <img class="head_leftImg" src="../../assets/img/school.svg" alt="...">
        <span>本科毕业设计管理平台</span>
      </div>
      <div class="head_right">
        <div class="login_user_info">
          <div class="bottom">
            <span>学院：{{userOrg}}</span>
            <el-tooltip class="item login_userName" effect="dark" content="查 看 个 人 信 息" placement="bottom-end" >
              <span @click="addTab(personalThing)">用户名：{{userName}}</span>
            </el-tooltip>
          </div>
          <!-- <div title="修改密码" @click="modifyPwdTab"></div> -->
        </div>
        <el-tooltip class="item" effect="dark" content="退 出 登 录 " placement="bottom-end">
          <div class="logout" @click="loginout"></div>
        </el-tooltip>
      </div>
    </el-header>

    <el-container>

      <!-- 左侧导航栏 -->
      <el-aside :style="{width: isCollapse ? '64px': '200px'}">
        <el-menu class="el-menu-vertical-demo" active-text-color="#ffd04b" :unique-opened="true" :collapse="isCollapse"
          :collapse-transition="false">

          <el-menu-item index="0" @click="home">
            <i class="el-icon-house"></i>
            <span slot="title">首页</span>
          </el-menu-item>

          <el-submenu v-for="menu in menuList" :index="menu.id" :key="menu.menuCode">

            <!-- 一级菜单 -->
            <template slot="title">
              <i :class="menu.icon"></i>
              <span slot="title">{{ menu.menuName }}</span>
            </template>

            <!-- 二级菜单 -->
            <el-menu-item v-for="menuItem in menu.children" :key="menuItem.menuCode" :index="menuItem.id"
              @click="addTab(menuItem)">
              {{menuItem.menuName}}
            </el-menu-item>
          </el-submenu>
        </el-menu>

        <div class="menu_middle" :style="{left: isCollapse ? '64px': '200px'}">
          <el-radio-group v-model="isCollapse">
            <el-radio-button :label="false" v-show="isCollapse">
              <i class="el-icon-arrow-right"></i>
            </el-radio-button>
            <el-radio-button :label="true" v-show="!isCollapse">
              <i class="el-icon-arrow-left"></i>
            </el-radio-button>
          </el-radio-group>
        </div>

      </el-aside>

      <!-- 主体部分 -->
      <el-main>
        <!-- 顶部tab页 -->
        <div class="headline">
          <el-tabs v-model="editableTabsValue" type="card" @tab-click="clickTab(editableTabsValue)"
            @tab-remove="removeTab">
            <el-tab-pane :closable="false">
              <span slot="label"><i class="el-icon-house"></i></span>
            </el-tab-pane>
            <el-tab-pane closable v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name">
              {{item.content}}
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="contentMain">
            <router-view v-on:refreshbizlines="addDetailsTab"></router-view>
        </div>
      </el-main>

    </el-container>
  </el-container>
</template>

<script>
  import { axiosRequest } from "@/utils/axiosRequest";
  export default {
    data() {
      var userInfo = JSON.parse(window.sessionStorage.getItem('userInfo')).user;
      return {
        isCollapse: false,
        personalThing:{routerName:"Grxx",menuName:"个人信息"},
        userOrg: userInfo.college,
        userName: userInfo.empName,
        menuList: [],
        editableTabsValue: '',
        editableTabs: [],
        tabIndex: 0,
        id: '',//任务id
      }
    },
    methods: {
      //  选择菜单
      switchMenu(routerName) {
        if (routerName != '' && routerName != null && routerName != undefined) {
          this.$router.push({ name: routerName });
        }
      },

      // 点击菜单栏首页
      home() {
        this.$router.push({ name: "Firstpage" });
      },

      // 退出登录
      loginout() {
        this.$confirm('此操作将退出登录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axiosRequest("post", "/logout", null).then((res) => {
            if (res.data.code === 200) {
              this.$message.success(res.data.data);
            } else {
              this.$message.error(res.data.data);
            }
            this.$router.push({ name: "Login" });
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消该操作'
          });          
        });
       
      },

      //新增tab页（左侧边栏）
      addTab(menuItem) {
        // console.log("menuItem=" + JSON.stringify(menuItem));
        var routerName = menuItem.routerName;
        var existTab = "";
        if (this.editableTabs.length > 0) {
          for (var i = 0; i < this.editableTabs.length; i++) {
            if (this.editableTabs[i].name == menuItem.routerName) {
              existTab = menuItem.routerName;
            }
          }
          if (existTab == "") {
            this.editableTabs.push({
              title: menuItem.menuName,
              name: routerName,
              content: ''
            });
            this.editableTabsValue = menuItem.routerName;
            if (routerName != '' && routerName != null && routerName != undefined) {
              this.$router.push({ name: routerName });
            }
          } else {
            this.editableTabsValue = menuItem.routerName;
            this.$router.push({ name: menuItem.routerName });
          }
        } else {
          this.editableTabs.push({
            title: menuItem.menuName,
            name: routerName,
            content: ''
          });
          this.editableTabsValue = menuItem.routerName;
          if (routerName != '' && routerName != null && routerName != undefined) {
            this.$router.push({ name: routerName });
          }
        }
      },

      //修改密码tab页
      modifyPwdTab() {
        var routerName = "ModifyPwd";
        var existTab = "";
        if (this.editableTabs.length > 0) {
          for (var i = 0; i < this.editableTabs.length; i++) {
            if (this.editableTabs[i].name == routerName) {
              existTab = routerName;
            }
          }
          if (existTab == "") {
            this.editableTabs.push({
              title: "修改密码",
              name: routerName,
              content: ''
            });
            this.editableTabsValue = routerName;
            if (routerName != '' && routerName != null && routerName != undefined) {
              this.$router.push({ name: routerName });
            }
          } else {
            this.editableTabsValue = routerName;
            this.$router.push({ name: routerName });
          }
        } else {
          this.editableTabs.push({
            title: "修改密码",
            name: routerName,
            content: ''
          });
          this.editableTabsValue = routerName;
          if (routerName != '' && routerName != null && routerName != undefined) {
            this.$router.push({ name: routerName });
          }
        }
      },

      //新增任务详情tab
      addDetailsTab(id) {
        // console.log("taskId=" + id);
        this.id = id;
        var routerName = "Jqrrwxq";
        var existTab = "";
        for (var i = 0; i < this.editableTabs.length; i++) {
          if (this.editableTabs[i].name == routerName) {
            existTab = routerName;
          }
        }
        if (existTab == "") {
          this.editableTabs.push({
            title: "任务详情",
            name: routerName,
            content: ''
          });
          this.editableTabsValue = routerName;
          if (routerName != '' && routerName != null && routerName != undefined) {
            this.$router.push({
              name: routerName,
              params: {
                id: id//打开任务详情tab传入任务id
              }
            })
          }
        } else {
          this.editableTabsValue = routerName;
          this.$router.push({
            name: routerName,
            params: {
              id: id//打开任务详情tab传入任务id
            }
          })
        }
      },

      // 点击切换tab页面
      clickTab(editableTabsValue) {
        if (editableTabsValue != 0) {
          this.$router.push({
            name: editableTabsValue,
            params: {
              id: this.id//切换tab将任务id传回
            }
          })
        } else {
          this.$router.push({ name: "Firstpage" });
        }
      },
      
      // 删除tab
      removeTab(targetName) {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }
        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
        if (this.editableTabs != "") {
          this.$router.push({ name: this.editableTabsValue });
        } else {
          this.$router.push({ name: "Firstpage" });//bug临时解决方案
        }
      }
    },

    mounted: function () {
      // 请求菜单注释
      axiosRequest("get", "/menu/list", null).then((res) => {
        if (res.data.code === 200) {
          this.menuList = res.data.data;
        } else {
          this.$message.error(res.data.data);
        }
      });
      this.$router.push({ name: 'Firstpage' });
    },

  }
</script>

<style lang="less" scoped>
  @import '../../assets/css/common/homePage.css';
</style>